<template>
    <div>
        <link rel="stylesheet" href="font_2188963_7qnpvij3nrj/iconfont.css">
        <div class="b">
            <h1>
                <img src="details1/small.png" alt="" @click="fun()">
                <span class="shezhi iconfont icon-shezhi"></span>
            </h1>
             <div class="item">
                 <img src="http://wjt0823.gz01.bdysite.com/m1.PNG" alt="" class="img1">
                <p class="font1">
                    <span class="f1">登录/注册</span>
                    <span class="f2">登录享优惠</span> 
                </p>
            </div>
            <ul>
                <li>
                    <p class="iconfont icon-gerenziliao"></p>
                    <span>个人资料</span>
                </li>
                <li>
                    <p class="iconfont icon-dizhi"></p>
                    <span>收货地址</span>
                </li>
                <li>
                    <p class="iconfont icon-shoucang"></p>
                    <span>我的收藏</span>
                </li>
            </ul>       
        </div>
            <h2>
                登录后将显示您的详细资料~ 
                <a href="#">马上登录&gt;</a>
            </h2>
    </div>
</template>

<script>

export default {
    methods:{
        fun(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
    h1{
        width: 100%;
        height: 0.44rem;
        img{
            width: 0.3rem;
            height: 0.3rem;
            margin-left: 0.05rem;
            margin-top: 0.05rem;
        }
    }
    .b{
        width: 100%;
        height: 2.06rem;
        background: url(../../../public/my/b1.png);
        background-size: 100% 2.06rem;
        display: flex;
        position: relative;
        .item{
            width: 100%;
            height: 1rem;
            margin-top: 0.44rem;
            position: absolute;
            left: 0;
            display: flex;
            .img1{
                width: 0.64rem;
                height: 0.64rem; 
                border-radius: 50%;
                margin-left: 0.2rem;
                vertical-align: bottom;
             }
            .font1{
                margin-top: 0.1rem;
                margin-left: 0.1rem;
                display: flex;
                flex-direction: column;
                .f1{
                    color: #fff;
                    font-size: 0.16rem; 
                }
                .f2{
                    color: #fff;
                    font-size: 0.12rem; 
                }
            }
        }
        .shezhi{
            display: inline-block;
            width: 0.44rem;
            height: 0.44rem;
            background-color: #202021;
            color: #fff;
            font-size: 0.24rem;
            text-align: center;
            position: absolute;
            right: 0.2rem;
            margin-top: 0.1rem;
        }
        ul{
            width: 100%;
            height: 0.52rem;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            li{
                width: 1.24rem;
                height: 0.52rem;
                background-color: rgba(21, 21, 24,0.6);
                display: flex;
                flex-direction: column;
                text-align: center;
                .iconfont{
                    padding-top: 0.05rem;
                    color: #fff;
                    font-size: 0.18rem;
                }
                span{
                    font-size: 0.14rem;
                    color: #fff;
                }
            }
        }   
    }
     h2{
            width: 3.43rem;
            height: 0.28rem;
            background-color: #cc3d3d;
            font-size: 0.12rem;
            color: #fff;
            text-align: center;
            line-height: 0.28rem;
            margin: 0.1rem auto;
            a{
                color: #fff;
                text-decoration: underline;
            }
        }
</style>